<template>
	<view class="page">
		<view class="search-main relative">
			<view class="search-item">
				<picker class="" @change="typeChange" :value="typeIndex" :range="typeList">
					<view class="search-type text-center mt-0">
						{{ type }}
						<u-icon name="arrow-down-fill" color="#666" size="12"></u-icon>
					</view>
				</picker>
				<u-search placeholder="请输入名称" :show-action="true" v-model="name" @search="customSearch"
					@custom="customSearch"></u-search>
			</view>

			<view class="flex mt-36 relative">
				<view class="picker-year">
					<picker class="" @change="yearChange" :value="yearIndex" :range="yearArray">
						<view class="tab-year" v-if="year">{{ year }}年录取分数情况
							<u-icon name="arrow-down-fill" color="#666" size="10"></u-icon>
						</view>
					</picker>
				</view>

				<!-- 	<view class="flex-1 text-center" @click="pickClick(0)">
					<view>{{ year }}</view>
				</view>
				<view class="flex-1 text-center" @click="pickClick(1)">{{ type }}</view>
				<view class="flex-1 text-center" @click="pickClick(2)">排序</view>
				 -->
			</view>
			<view v-if="0||yearShow" class="pick-select">
				<text v-for="(item, index) in selectList" :key="index" :class="{
            select1:
              (selectIndex == 0 && index == yearIndex) ||
              (selectIndex == 1 && index == typeIndex) ||
              (selectIndex == 2 && index == sortIndex),
          }" @click="selectClick(index)">{{ item }}</text>
			</view>
		</view>

		<view class="content">
			<view class="item">
				<view class="word" @click="sortCheck(0)">{{ `学院名称` }}
					<u-icon name="arrow-down-fill" color="#666" size="10"></u-icon>
				</view>
				<view class="mean" @click="sortCheck(1)">{{ `专业名称` }}
					<u-icon name="arrow-down-fill" color="#666" size="10"></u-icon>
				</view>
				<view class="right white-nowrap" @click="sortChange()">{{ `录取分数` }}
					<u-icon v-if="downFlag" name="arrow-down-fill" color="#666" size="10"></u-icon>
					<u-icon v-if="!downFlag" name="arrow-up-fill" color="#666" size="10"></u-icon>
				</view>
			</view>
			<template v-for="(item, index) in navList" :key="index">
				<view class="item" @click="">
					<view class="word">{{ item.targetSchoolName }} </view>
					<view class="mean">{{ item.targetSpecialtyName }}</view>
					<view class="right">{{ item.minAcceptScore }}</view>
				</view>
			</template>
		</view>

		<view class="page-btn" v-if="0">
			<view class="btn" @click="">快闪</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				columns: [
					["中国", "美国", "日本"]
				],
				navList: [],
				yearShow: false,
				curNav: 0,
				wordData: "",
				name: "",
				specialtyId: "",
				selectIndex: 0,
				selectItemIndex: 0,
				selectList: [],
				yearIndex: 0,
				year: "",
				qryYearList: [],
				typeIndex: 0,
				type: "学校",
				typeList: ["学校", "专业"],
				sortIndex: -1,
				sort: "",
				sortList: ["院校", "专业", "分数"],
				sortTypeList: ["1", "2", "3"],
				// sortMap: {
				// 	"1":"院校",
				// 	"2":"院校",
				// 	"3":"院校",
				// },
				sortObjArr: [{
						id: 1,
						name: '院校'
					},
					{
						id: 2,
						name: '专业'
					},
					{
						id: 3,
						name: '分数'
					},
					{
						id: 4,
						name: '分数降序'
					},
				],

				yearIndex: 0,
				// yearArray: [1, 2, 3],
				yearArray: [],
				size: 20,
				current: 1,
				total: 0,
				downFlag: true,
			};
		},
		async onLoad(options) {
			this.current = 1;
			this.specialtyId = options.specialtyId || "";
			await this.getqryYearList();
			this.getList();
		},
		onShow() {},
		onReachBottom() {
			if (this.navList.length < this.total) {
				this.current += 1;
				this.getList(false);
			}
		},
		methods: {
			pickClick(index) {
				console.log("index=", index);
				if (index == 0) {
					this.selectList = this.qryYearList;
				}
				if (index == 1) {
					this.selectList = this.typeList;
				}
				if (index == 2) {
					this.selectList = this.sortList;
				}
				this.selectIndex = index;
				this.yearShow = !this.yearShow;
			},
			selectClick(index) {
				console.log("index=", index, this.selectList);

				if (this.selectIndex == 0) {
					this.yearIndex = index;
					this.selectItemIndex = index;
					this.year = this.selectList[index];
				}
				if (this.selectIndex == 1) {
					this.typeIndex = index;
					this.selectItemIndex = index;
					this.type = this.selectList[index];
				}
				if (this.selectIndex == 2) {
					this.sortIndex = index;
					this.selectItemIndex = index;
					this.sort = this.selectList[index];
				}
				this.yearShow = !this.yearShow;
				this.getList();
			},
			toStart(item) {
				let curData = this.navList;
				//   uni.showToast({
				//     icon: 'none',
				//     title: `${curData.name}的数量为${curData.num}`
				//   })
				uni.navigateTo({
					url: "/pages/special/schoolDetail?id=" +
						item.id +
						"&schoolCode=" +
						item.schoolCode,
				});
			},

			customSearch(e) {
				// console.log("customSearch", e);
				this.getList();
			},

			sortCheck(e) {
				this.sortIndex = e
				this.getList();
			},

			yearChange(e) {
				if (e.detail.value == this.yearIndex) return;
				// console.log("yearChange=", e);
				this.yearIndex = e.detail.value;
				this.year = this.yearArray[this.yearIndex];
				this.getList();
			},
			typeChange(e) {
				// if (e.detail.value == this.yearIndex) return;
				// console.log("yearChange=", e);
				this.typeIndex = e.detail.value;
				this.type = this.typeList[this.typeIndex];
			},
			sortChange() {
				if (this.downFlag) {
					this.sortIndex = 2
				} else {
					this.sortIndex = 3
				}
				this.downFlag = !this.downFlag
				this.getList();
			},
			getqryYearList(name = "") {
				return new Promise((resolve, reject) => {
					this.$http
						.get1("/client/undergraduate/qryYear", {
							examType: 12,
						})
						.then((res) => {
							if (res.code == 200) {
								this.yearArray = res.data;
								this.year = this.yearArray[this.yearIndex] || "";
								resolve();
							}
						});
				});
			},
			getList(isInit = true) {
				if (isInit) {
					this.current = 1
				}
				this.$http
					.get1("/client/undergraduate/qryAcceptScore", {
						year: this.year,
						current: this.current,
						size: this.size,
						schoolName: this.type == "学校" ? this.name : "",
						specialtyName: this.type != "学校" ? this.name : "",
						sort: this.sortIndex != -1 ? this.sortObjArr[this.sortIndex].id : "",
						specialtyId: this.specialtyId,
						examType: 12,
					})
					.then((res) => {
						// console.log(res);
						if (res.code == 200) {
							this.total = res.data.total;
							if (this.current == 1) {
								this.navList = res.data.records;
							} else {
								this.navList.push(...res.data.records);
							}
						}
					});
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f2f3f8;
	}

	.page {
		padding: 0rpx 0rpx 0rpx;
		box-sizing: border-box;
	}

	.border-bottom {
		border-bottom: 1rpx solid #666;
	}

	.search-main {
		box-sizing: border-box;
		width: 100%;
		// min-height: 120rpx;
		background: #5480f8;
		box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42, 65, 152, 0.05);
		// border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 40rpx 10rpx;


		.search-item {
			display: flex;
			justify-content: center;
			align-items: center;
			// border: 2rpx solid #666;

			::v-deep .u-search {
				width: 490rpx;
				.u-search__action {
					font-size: 28rpx;
					color: #f8f6f6;
				}
			}

			.search-type {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 68rpx;
				background-color: #f2f2f2;
				border-radius: 23rpx;
				padding: 1rpx 10rpx;
				text-align: center;
				margin-right: 10rpx;
				font-size: 24rpx;
				line-height: 24rpx;
				white-space: nowrap;
				// border: 1rpx solid #666;


			}



		}


		.picker-year {
			display: flex;
			justify-content: center;
			// flex-direction: row;
			// border: 1rpx solid;
			width: 100%;

			.tab-year {
				display: flex;
				background-color: #f2f2f2;
				border-radius: 25rpx;
				text-align: center;
				justify-content: center;
				padding: 14rpx 10rpx;
				font-size: 24rpx;
				line-height: 24rpx;
			}
		}



		.pick-select {
			position: absolute;
			left: 0;
			bottom: 0;
			top: 180rpx;
			background-color: #fff;
			height: 80rpx;
			width: 100vw;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			border: 1rpx solid #5480f8;

			text {
				margin: 20rpx;
			}

			.select1 {
				border-radius: 10rpx;
				color: #5480f8;
				border: 1rpx solid #5480f8;
			}
		}
	}

	.content {
		padding: 2rpx 10rpx;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			min-height: 100rpx;
			background: #ffffff;
			border: 1rpx solid #ccc;
			margin-bottom: 0rpx;
			padding: 10rpx 10rpx;
			font-size: 22rpx;
			line-height: 22rpx;

			.word {
				flex: 5;
				display: flex;
				justify-content: center;
				color: #333333;
				text-align: center;
				// white-space: nowrap;
				// border: 1rpx solid #5480f8;
				// white-space: nowrap;
			}

			.mean {
				flex: 6;
				display: flex;
				justify-content: center;
				// width: 350rpx;
				margin-left: 1rpx;
				// overflow: hidden;
				// text-overflow: ellipsis;
				white-space: nowrap;
				color: #575a64;
				text-align: center;
				// border: 1rpx solid #5480f8;
			}

			.right {
				flex: 2;
				display: flex;
				justify-content: center;
				// width: 100rpx;
				margin-left: 4rpx;
				// overflow: hidden;
				// text-overflow: ellipsis;
				// white-space: nowrap;
				color: #575a64;
				text-align: center;
				// border: 1rpx solid #5480f8;
				&.white-nowrap {
					white-space: nowrap;
				}
			}
		}
	}

	.page-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 176rpx;
		padding: 30rpx 62rpx;
		box-sizing: border-box;
		background-color: #fff;
		z-index: 10;

		.btn {
			width: 100%;
			height: 90rpx;
			background: #5480f8;
			border-radius: 46rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #ffffff;

			&.disable {
				background-color: #cad8fc;
			}
		}
	}
</style>